html,body,#app{
  width:100%;
  height:100%;
  padding: 0;
  margin: 0;
}
html{
  margin: auto;
  overflow: hidden;
}
.page_view {
  width: 100%;
  height: 100%;
}
.page_view.at{
  overflow-y: auto;
}
.page_view.flex{
  display: flex;
  flex-direction: column;
}
.page_view>.flex1{
  flex: 1;
}
.page_view>.flex1.at{
  overflow-y: auto;
}
/*路由过渡动画*/
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active,
.slide-in-enter-active,
.slide-out-leave-active{
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-in-enter {
  opacity: 0;
  transform: scale3d(0,0,0);
}
.slide-in-leave-active {
  opacity: 0;
  transform: scale3d(1,0,0);
}
.slide-out-enter {
  opacity: 0;
  transform: scale3d(1,0,0);
}
.slide-out-leave-active {
  opacity: 0;
  transform: scale3d(0,0,0);
}
